<template> 
	<div>
		<el-dialog title="绑定商品" :visible.sync="addVisible" :close-on-click-modal="false"
			:close-on-press-escape="false" :before-close="cancelDialog" width="1200px" ref="dialog">
		 	<e-control :search-form-options="dialogFormOptions" @on-search="onSearch" @on-refresh="onRefresh"   />
			<el-row type="flex" justify="space-between" style="margin-bottom: 20px">
				<span></span>
				<el-button icon="el-icon-check" type="success" @click="batchAddClick" size="small">
					提交
				</el-button>
			</el-row>
			<e-table
				:loading="loading"
				:data="tableData" 
				:columns="columns2" 
				border 
				style="width: 100%" 
				:max-height="maxHeightNow"
				:current="currentPage"
				:total="total"
				@selection-change="changeTableSelectData"
				@page-size-change="changePageSize"
				@page-current-change="changePageCurrent"
			>
					<template slot-scope="{scope}" slot="goodsName">
						<el-tooltip
							:content="scope.row.goodsName"
							placement="bottom"
							effect="dark"
							class="goodsNameBox"
						>
							<div>{{ scope.row.goodsName }}</div>
						</el-tooltip>
					</template>
					<template slot-scope="{ scope }" slot="brandName">
						<el-tooltip :content="scope.row.brandName" placement="bottom" effect="dark" class="goodsNameBox">
							<span>{{ scope.row.brandName }}</span>
						</el-tooltip>
					</template>
					<template slot-scope="{scope}" slot="categoryName">
						<el-tooltip
							:content="scope.row.primaryCategoryName+'/'+scope.row.tertiaryCategoryName+'/'+scope.row.tertiaryCategoryName"
							placement="bottom"
							effect="dark"
							class="goodsNameBox"
						>
							<div>
								{{ scope.row.primaryCategoryName || "" }}
								<span class="divider">/</span>
								{{ scope.row.secondaryCategoryName || "" }}
								<span class="divider">/</span>
								{{ scope.row.tertiaryCategoryName || "" }}
							</div>
						</el-tooltip>
					</template> 
					<template slot-scope="{scope}" slot="goodsState">
						<span>
							{{ scope.row.goodsState == "DOWN" ? "下架" : "上架" }}
						</span>
					</template>
					<template slot-scope="{scope}" slot="supplierName">
						<el-tooltip
							:content="scope.row.supplierName"
							placement="bottom"
							effect="dark"
							class="goodsNameBox"
						>
							<div>{{ scope.row.supplierName }}</div>
						</el-tooltip>
					</template>
					<template slot-scope="{scope}" slot="officialPrice">
						<span>
							{{ priceCalc(scope.row.officialPrice)}}
						</span>
					</template>
					<template slot-scope="{scope}" slot="agreementPrice">
						<span>
							{{ priceCalc(scope.row.agreementPrice)}}
						</span>
					</template>
					<template slot-scope="{scope}" slot="initExcludeTaxPrice">
						<span>
							{{ priceCalc(scope.row.initExcludeTaxPrice)}}
						</span>
					</template>
					<template slot-scope="{scope}" slot="goodsPrice">
						<span>
							{{ priceCalc(scope.row.goodsPrice)}}
						</span>
					</template>
					<template slot-scope="{scope}" slot="excludeTaxPrice">
						<span>
							{{ priceCalc(scope.row.excludeTaxPrice)}}
						</span>
					</template>
					<!-- <template slot-scope="{scope}" slot="operation">
						<el-button type="text" icon="el-icon-plus" @click="addClick(scope.row)">添加</el-button>
					</template> -->
			</e-table> 
		</el-dialog>
		 
		<el-dialog title="绑定商品价格模版" :visible.sync="dialogFormVisible" width="800px"> 
			<el-alert
				:closable="false"
				title="温馨提示"
				type="info"
				description="不绑定商品价格模版，默认原价上架商品"
				show-icon>
			</el-alert>
			<br />
			<el-form label-width="100px"> 
				<el-row>
					<el-col :span="12">
						<el-form-item label="商品状态">
							<el-select v-model="goodsState" clearable>
								<el-option label="上架" value="PASS"></el-option>
								<el-option label="下架" value="DOWN"></el-option>
								<el-option label="可见不可售" value="PASS_DIS"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item  label="价格模版">
							<el-select 
								v-model="templateId"  
								placeholder="请选择商品价格模版" 
								clearable 
								filterable
								@change="handleChangeTemplate"
							>
								<el-option 
									v-for="(item,index) in templateArr" 
									:key="index" 
									:label="item.templateName" 
									:value="item.id"
									@click.native="handleClickTemplate(item)"
								>
								</el-option>
							</el-select>
						</el-form-item>  
					</el-col>
				</el-row> 
			</el-form>
			<el-alert type="info" :closable="false">
				<el-descriptions title="价格模版信息" :column="2">
					<el-descriptions-item label="商城未税价加点方式">
						{{templateInfo.pointType==="1"?"百分比":templateInfo.pointType==="2"?"固定值":""}}
					</el-descriptions-item>
					<el-descriptions-item label="商城未税价加点值">{{templateInfo.point}}</el-descriptions-item>
					<el-descriptions-item label="协议未税价加点方式">
						{{templateInfo.initPointType==="1"?"百分比":templateInfo.initPointType==="2"?"固定值":""}}
					</el-descriptions-item>
					<el-descriptions-item label="协议未税价加点值">{{templateInfo.initPoint}}</el-descriptions-item>
				</el-descriptions>
			</el-alert>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitAddGoods">提 交</el-button>
			</div>
		 </el-dialog>
    </div>
</template>

<script>
import { goodsList } from "@/api/supplierActivity/goods.admin.js";
import { addGoodsApi, priceTemplateListApi } from "@/api/itemPoolApi.js";
import eControl from '@/components/e-control';
import { columns2 } from "../columns";
import {
	dialogFormOptions,
} from '../control';
import { priceCalc } from "@/util/common";
export default {
	name: 'add_goods_dialog',
	props: {  
		addVisible:{
			type: Boolean,
			default: () => {
				return false;
			}
		}, 
		id:{
			type: String,
			default: () => {
				return "";
			}
		}, 
		supplierOption: {
			type: Array,
			default: () => {
				return [];
			}
		},
		cancelDialog: {
			type: Function,
			default: () => { }
		},
		refresh: {
			type: Function,
			default: () => { }
		},
	},
	components: {
		eControl, 
	},
    data() { 
		return {
			priceCalc,
			loading: false,
			columns2,
			dialogFormOptions,
			tableData: [],
			searchData: {}, 
			currentPage: 1,
			pageSize: 10,
			total: 0,
			tableSelectData: [],
			dialogFormVisible: false,
			templateInfo: {},
			templateId: "",
			goodsState: "",
			templateParams: {
				pageSize: 500,
				pageNum: 1,
				templateName:""
			}, 
			templateArr: [],
			pointTypeList:{
				"1": "百分比",
				"2":"固定值"
			}, 
        }
	},
	computed: { 
		// 表格高度
		maxHeightNow() {
			const height = window.innerHeight;
			return height - 400;
		}
	},
	created() {  
		console.log("create");
		this.dialogFormOptions[2].options = this.supplierOption; 
		this.getGoodsList();
		this.getPriceTemplate();
	},
	methods: { 
		getGoodsList() { 
			this.loading = true;
			let params = {
				pageSize: this.pageSize,
				pageNum: this.currentPage, 
				goodsState: "PASS",
				...this.searchData
			}; 

			goodsList(params).then(res => { 
				this.loading = false;
				this.tableData = res.rows;
				this.total = res.total;
			})
		},
		// 搜索
		onSearch(data) { 
			// todo 清空条件
			this.currentPage = 1;
			this.pageSize = 10;
			this.searchData = data;
			this.getGoodsList();
		}, 
		onRefresh(data) { 
			this.currentPage = 1;
			this.pageSize = 10;
			this.searchData = data;
			this.getGoodsList();
		},
		// 获取列表条数，查询数据
		changePageSize(size) {
			this.pageSize = size
			this.getGoodsList()
		},
		// 获取当前分页，查询数据
		changePageCurrent(current) {
			this.currentPage = current
			this.getGoodsList()
		}, 
		getPriceTemplate() { 
			priceTemplateListApi(this.templateParams).then((res) => {  
				this.templateArr = res.rows;
			})
		},
		changeTableSelectData(rows) {
			this.tableSelectData = rows;
		},
		handleChangeTemplate() { 
			this.templateInfo = "";
		},
		handleClickTemplate(val) {  
			this.templateInfo = val;
		},
		batchAddClick() {  
			if (this.tableSelectData.length == 0) { 
				return this.$message.error("请先选择商品");
			}
			this.dialogFormVisible = true;
			this.templateId = "";
			this.goodsState = "";
			this.templateInfo = {}; 
		},
		submitAddGoods() { 

			if (this.tableSelectData.length == 0) { 
				return this.$message.error("请先选择商品");
			}

			let goodsArr = [];
			this.tableSelectData.map(item => {  
				goodsArr.push({ 
					goodsId: item.id,
					goodsState: this.goodsState ? this.goodsState : item.goodsState,
					tenantId: this.id,
					templateId: this.templateId,
					sku: item.sku,
					supplierId: item.supplierId,
					agreementPrice: item.agreementPrice,
					initExcludeTaxPrice: item.initExcludeTaxPrice,
					initTaxRate: item.initTaxRate,
					goodsPrice: item.goodsPrice,
					excludeTaxPrice: item.excludeTaxPrice,
					taxRate: item.taxRate
				})
			})  

			addGoodsApi(this.id, goodsArr).then(() => {  
				this.$message({
					type: "success",
					message: "添加成功！"
				})
				this.dialogFormVisible = false;
				// 添加完先查 tenantIds
				this.refresh();
				
			}).catch((err) => {
				this.$message({
					type: "error",
					message: err
				})
			})
			
		}


	},
}
</script>

<style scoped lang="scss">
	.goodsNameBox {
		overflow: hidden;
		max-width: 100%;
		white-space: nowrap;
		height: 25px;
		text-overflow: ellipsis;
	}

</style>